生命周期钩子

概述

在 Angular 中，组件和指令的生命周期是指它们从创建到销毁的整个过程。Angular 提供了一系列生命周期钩子（Lifecycle Hooks），允许开发者在组件或指令的不同生命周期阶段执行特定的操作。这些钩子可以帮助我们更好地管理和控制组件的行为。

生命周期钩子的类型

Angular 提供了多个生命周期钩子，每个钩子在组件或指令的不同阶段被调用。以下是一些常用的生命周期钩子：

1. ngOnChanges: 当输入属性 (Input) 发生变化时调用。
2. ngOnInit: 在组件初始化时调用，通常用于初始化数据。
3. ngDoCheck: 在每次变更检测时调用，用于自定义变更检测逻辑。
4. ngAfterContentInit: 在内容投影 (Content Projection) 完成后调用。
5. ngAfterContentChecked: 在每次内容投影变更检测后调用。
6. ngAfterViewInit: 在视图初始化完成后调用。
7. ngAfterViewChecked: 在每次视图变更检测后调用。
8. ngOnDestroy: 在组件销毁前调用，用于清理资源。

代码示例

1. ngOnChanges

ngOnChanges 钩子在输入属性发生变化时调用。它接收一个 SimpleChanges 对象，包含当前和之前的属性值。

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent implements OnChanges {
  @Input() message: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called');
    console.log(changes);
  }
}

2. ngOnInit

ngOnInit 钩子在组件初始化时调用，通常用于初始化数据。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`
})
export class ExampleComponent implements OnInit {
  message: string;

  ngOnInit() {
    this.message = 'Component initialized';
    console.log('ngOnInit called');
  }
}

3. ngOnDestroy

ngOnDestroy 钩子在组件销毁前调用，用于清理资源，如取消订阅。

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`
})
export class ExampleComponent implements OnDestroy {
  private subscription: Subscription;

  constructor() {
    this.subscription = someObservable.subscribe(data => {
      // 处理数据
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
    console.log('ngOnDestroy called');
  }
}

实践练习

练习 1: 使用 ngOnInit 初始化数据

创建一个新组件 DataInitComponent，在 ngOnInit 钩子中初始化一个数组，并在模板中显示数组内容。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-data-init',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class DataInitComponent implements OnInit {
  items: string[] = [];

  ngOnInit() {
    this.items = ['Item 1', 'Item 2', 'Item 3'];
  }
}

练习 2: 使用 ngOnDestroy 清理资源

创建一个新组件 ResourceCleanupComponent，在组件中订阅一个 Observable，并在 ngOnDestroy 钩子中取消订阅。

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

@Component({
  selector: 'app-resource-cleanup',
  template: `<p>{{ counter }}</p>`
})
export class ResourceCleanupComponent implements OnDestroy {
  counter: number = 0;
  private subscription: Subscription;

  constructor() {
    this.subscription = interval(1000).subscribe(val => {
      this.counter = val;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

总结

生命周期钩子是 Angular 中非常重要的概念，它们允许我们在组件或指令的不同生命周期阶段执行特定的操作。通过合理使用这些钩子，我们可以更好地管理和控制组件的行为，确保应用的稳定性和性能。

在接下来的课程中，我们将继续探讨 Angular 的其他高级特性，如组件通信、服务、路由等。希望你能通过这些练习更好地理解生命周期钩子的使用，并在实际项目中灵活应用。